<template>
  <div class="new-mv">
    <!-- 地区 -->
    <div class="order">
      <ul>
        <li>
          <span>地区：</span>
          <span v-for="(item,index) in TarBar.TarBarArea" :key="index" @click="handleClick(item,queryInfo.type,queryInfo.order)" :class="{active: queryInfo.area === item}">{{item}}</span>
        </li>
      </ul>
    </div>
    <!-- 类型 -->
    <div class="order">
      <ul>
        <li>
          <span>类型：</span>
          <span v-for="(item,index) in TarBar.TarBarType" :key="index" @click="handleClick(queryInfo.area,item,queryInfo.order)" :class="{active: queryInfo.type===item}">{{item}}</span>
        </li>
      </ul>
    </div>
    <!-- 排序 -->
    <div class="order">
      <ul>
        <li>
          <span>排序：</span>
          <span v-for="(item,index) in TarBar.TarBarOrder" :key="index" @click="handleClick(queryInfo.area,queryInfo.type,item)" :class="{active: queryInfo.order===item}">{{item}}</span>
        </li>
      </ul>
    </div>
    <!-- mv部分 -->
    <div class="mv-wrap">
      <ul>
        <li v-for="item in mvList" :key="item.id" @mouseover="playMove = item.id" @mouseleave="playMove = false" @click="mvClick(item)">
          <div class="mv-img">
            <img v-lazy="item.cover" alt="">
          </div>
          <div class="play-count" v-show="playMove" :class="{songs_top_bottom: playMove===item.id}">
            <i class="iconfont icon-sanjiaoright"></i>
            <span>{{item.playCount | initVolume}}</span>
          </div>
          <div class="mv-detail">
            <span class="name">{{item.name}}</span>
            <span class="author">{{item.artistName}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="queryInfo.num" :page-sizes="[8, 12, 16, 20]" :page-size="queryInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getNewMv } from '@/api/mv'

export default {
  name: 'NewMv',
  created() {
    this.getMvData()
  },
  data() {
    return {
      // 导航
      TarBar: {
        TarBarArea: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
        TarBarType: ['全部', '官方版', '原生', '现场版', '网易出品'],
        TarBarOrder: ['上升最快', '最热', '最新']
      },
      // 记录活跃状态
      // isActive: 0,
      // isActiveTwo: 0,
      // isActiveThree: 1,
      queryInfo: {
        area: '全部',
        type: '全部',
        order: '最热',
        limit: 8,  //当前页能显示的最多数据
        offset: 0,  //分页数据
        total: 0, //总条数
        num: 1 //当前页数
      },
      // 最新mv数据
      mvList: [],
      playMove: false
    }
  },
  methods: {
    async getMvData() {
      const { data: res } = await getNewMv(this.queryInfo)
      if (res.count) {
        this.queryInfo.total = res.count
      }
      this.mvList = res.data
    },
    // 点击上方类型部分
    handleClick(area, type, order) {
      this.queryInfo.area = area
      this.queryInfo.type = type
      this.queryInfo.order = order
      this.queryInfo.num = 1
      this.queryInfo.offset = 1
      this.getMvData()
    },
    // 点击分页器
    handleSizeChange(page) {
      this.queryInfo.limit = page
      this.getMvData()
    },
    handleCurrentChange(num) {
      this.queryInfo.num = num
      this.queryInfo.offset = (num - 1) * this.queryInfo.limit
      this.getMvData()
    },
    mvClick(val) {
      this.$store.dispatch('getMvDetail', val.id)
      this.$router.push(`/home/mvdetail/${val.id}`)
    }
  }
}
</script>

<style lang="less">
.new-mv {
  .order {
    ul {
      li {
        span {
          display: inline-block;
          margin: 5px 15px;
          &.active {
            color: red;
          }
        }
      }
    }
  }
  .mv-wrap {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 22%;
        margin: 10px 15px;
        border-radius: 12px;
        overflow: hidden;
        .mv-img {
          img {
            width: 100%;
          }
        }
        .play-count {
          position: absolute;
          top: -20%;
          left: 0;
          right: 0;
          padding: 5px 8px;
          box-sizing: border-box;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));
          color: #fff;
          text-align: right;
          i {
            font-size: 16px;
            margin-right: 1px;
          }
          &.songs_top_bottom {
            // animation: name duration timing-function delay iteration-count direction fill-mode;
            animation: songs_top_bottom 0.5s linear forwards;
          }
        }
      }
    }
  }
}
</style>